import React from 'react'
import { useParams, useNavigate } from 'react-router-dom'

const VideoPlayer: React.FC = () => {
  const params = useParams()
  const navigate = useNavigate()

  const video = {
    id: params.id || '1',
    title: 'Beach Sunset Vlog',
    description: 'Join me for a beautiful sunset at the beach!',
    duration: '5:23',
    views: '12.4k',
    date: '2 days ago',
    likes: '1.2k',
    comments: '45',
    url: 'https://example.com/video.mp4',
  }

  return (
    <div className="min-h-screen bg-app-dark text-white">
      {/* Video Player */}
      <div className="relative w-full aspect-video bg-black">
        <video
          src={video.url}
          className="w-full h-full object-contain"
          controls
          autoPlay
        />
        <button
          onClick={() => navigate(-1)}
          className="absolute top-4 left-4 w-10 h-10 rounded-full bg-black/50 flex items-center justify-center"
        >
          <i className="fas fa-arrow-left"></i>
        </button>
      </div>

      {/* Video Info */}
      <div className="p-4">
        <h1 className="text-xl font-bold mb-2">{video.title}</h1>
        <div className="flex items-center text-gray-400 text-sm mb-4">
          <span>{video.views} views</span>
          <span className="mx-2">•</span>
          <span>{video.date}</span>
        </div>

        <p className="text-gray-300 mb-4">{video.description}</p>

        {/* Actions */}
        <div className="flex justify-between items-center mb-6">
          <div className="flex space-x-4">
            <button className="flex flex-col items-center">
              <i className="fas fa-heart text-xl mb-1"></i>
              <span className="text-xs">{video.likes}</span>
            </button>
            <button className="flex flex-col items-center">
              <i className="fas fa-comment text-xl mb-1"></i>
              <span className="text-xs">{video.comments}</span>
            </button>
            <button className="flex flex-col items-center">
              <i className="fas fa-share text-xl mb-1"></i>
              <span className="text-xs">Share</span>
            </button>
          </div>
          <button className="bg-gradient-to-r from-primary to-primary-gradient-end text-white px-6 py-2 rounded-full text-sm font-bold">
            Subscribe
          </button>
        </div>

        {/* Comments */}
        <div>
          <h2 className="text-lg font-bold mb-4">Comments</h2>
          <div className="space-y-4">
            {/* Comment Input */}
            <div className="flex items-center space-x-2">
              <div className="w-8 h-8 rounded-full overflow-hidden">
                <img
                  src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60"
                  alt="User Avatar"
                  className="w-full h-full object-cover"
                />
              </div>
              <input
                type="text"
                placeholder="Add a comment..."
                className="flex-1 bg-card-dark rounded-full px-4 py-2 text-sm"
              />
            </div>

            {/* Comment List */}
            <div className="space-y-4">
              {[1, 2, 3].map((comment) => (
                <div key={comment} className="flex space-x-2">
                  <div className="w-8 h-8 rounded-full overflow-hidden">
                    <img
                      src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60"
                      alt="User Avatar"
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <div className="flex-1">
                    <div className="bg-card-dark rounded-xl p-3">
                      <p className="font-bold">User {comment}</p>
                      <p className="text-gray-300">This video is amazing! 😍</p>
                    </div>
                    <div className="flex items-center text-gray-400 text-xs mt-1 ml-3">
                      <span>2 days ago</span>
                      <span className="mx-2">•</span>
                      <button>Reply</button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default VideoPlayer 